<template>
	<view class="audit-container">
		<!-- 基本信息部分 -->
		<view class="section">
			<view class="section-title">
				<view class="section-line"></view>
				<text>基本信息</text>
			</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label required">用户昵称：</text>
					<text class="value">{{ masterInfo.cuser?.name }}</text>
				</view>
				<view class="form-item">
					<text class="label">姓名：</text>
					<text class="value">{{ masterInfo.cmaster?.name }}</text>
				</view>
				<view class="form-item">
					<text class="label required">手机号码：</text>
					<text class="value">{{ masterInfo.cmaster?.mobile }}</text>
				</view>
				<view class="form-item">
					<text class="label required">专业技能：</text>
					<text class="value">{{ masterInfo.cmaster?.professional_skills }}
					</text>
				</view>
				<view class="form-item">
					<text class="label required">工作经验：</text>
					<text class="value">{{ masterInfo.cmaster?.work_experience }} </text>
				</view>
			</view>
		</view>

		<!-- 上传证件部分 -->
		<view class="section">
			<view class="section-title">
				<view class="section-line"></view>
				<text>上传证件</text>
			</view>
			<view class="form-group">
				<!-- <view class="form-item">
					<text class="label required">身份证正/反照片</text>
					<view class="image-preview">
						<template v-for="(item, index) in masterInfo.cmaster?.id_card.split(',')">
							<image class="preview-img" :src="item" mode="fill" @click="
                  previewImage(
                    masterInfo.cmaster?.id_card.split(','),
                    'id_card',
                    index
                  )
                "></image>
						</template>
					</view>
				</view> -->
				<view class="form-item">
					<text class="label">技能证书</text>
					<view class="image-preview">
						<image class="preview-img" :src="masterInfo.cmaster?.certificate" mode="fill"
							@click="previewImage(masterInfo.cmaster?.certificate)"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 审核结果部分 -->
		<view class="section" v-if="action === 'audit'">
			<view class="section-title">
				<view class="section-line"></view>
				<text>审核结果</text>
			</view>
			<view class="form-group">
				<view class="form-item">
					<text class="label">审核备注：</text>
					<input v-model="auditObj.audit_remark" class="input-field" type="text" placeholder="请输入审核备注" />
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer" v-if="action === 'audit'">
			<button class="btn btn-reject" @click="auditStore(3)">审核不通过</button>
			<button class="btn btn-approve" @click="auditStore(2)">审核通过</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getMasterAduitInfo as getmasterInfo,
		setMasterBindShop as saveAudit,
	} from "@/apiShop/master";
	import {
		showToast
	} from "@/utils/helper";
	// 这里可以添加业务逻辑
	const action = ref(null);
	const getmasterInfoData = async () => {
		const res = await getmasterInfo({
			id: auditObj.value.id
		});
		console.log(res);
		masterInfo.value = res;
	};

	const auditObj = ref({
		id: null,
		audit: 0,
		audit_remark: "",
	});
	const masterInfo = ref({});
	const previewImage = (images, type = "init", index = 0) => {
		if (type !== "init")
			return uni.previewImage({
				urls: images,
				current: index,
			});
		uni.previewImage({
			urls: [images],
		});
	};
	const auditStore = async (status) => {
		auditObj.value.audit = status;
		if (auditObj.value.audit === 3 && !auditObj.value.audit_remark) {
			showToast("请输入审核备注");
			return;
		}
		await saveAudit(auditObj.value);
		showToast("审核成功");
		uni.navigateBack();
	};
	onLoad(async (options) => {
		auditObj.value.id = options.id;
		action.value = options.action;
		await getmasterInfoData();
	});
</script>

<style scoped>
	.audit-container {
		background-color: #fff;
		min-height: 90vh;
		padding-bottom: 120rpx;
	}

	.section {
		margin-bottom: 20rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.section-line {
		width: 6rpx;
		height: 30rpx;
		background-color: #1989fa;
		margin-right: 10rpx;
	}

	.form-group {
		padding: 0 30rpx;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.required::before {
		content: "*";
		color: #ff4d4f;
		margin-right: 4rpx;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	.image-preview {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.preview-img {
		width: 200rpx;
		height: 160rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
	}

	.input-field {
		height: 80rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.brand-selector {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}

	.brand-text {
		font-size: 28rpx;
		color: #999;
	}

	.brand-arrow {
		font-size: 28rpx;
		color: #999;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		height: 100rpx;
		z-index: 10;
	}

	.btn {
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		border-radius: 0;
		border: none;
	}

	.btn-reject {
		background-color: #ff4d4f;
	}

	.btn-approve {
		background-color: #1989fa;
	}
</style>